<template>
    <div class="contact-doctor-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>联系医生</h1>
            <p class="subtitle">选择医生进行咨询</p>
        </div>

        <!-- 医生列表 -->
        <div class="doctor-list">
            <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
                <div class="doctor-info">
                    <div class="doctor-avatar">
                        {{ doctor.avatar || '👨‍⚕️' }}
                    </div>
                    <div class="doctor-details">
                        <h3 class="doctor-name">{{ doctor.name }}</h3>
                        <p class="doctor-phone">{{ doctor.phone }}</p>
                    </div>
                </div>
                <button class="contact-btn" @click="callDoctor(doctor.phone)">
                    联系医生
                </button>
            </div>
        </div>

        <!-- 底部导航组件 -->
        <navigation :active-tab="activeTab" @tab-change="handleTabChange" />
    </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Navigation from '@/components/Navigation.vue';

export default {
    components: {
        Navigation
    },
    setup() {
        const router = useRouter();
        const activeTab = ref('mine');

        // 模拟医生数据
        const doctors = ref([
            {
                id: 1,
                name: '张三风医生',
                phone: '19966722286',
                avatar: '👨‍⚕️'
            },
            {
                id: 2,
                name: '李连杰医生',
                phone: '15678306312',
                avatar: '👨‍⚕️'
            },
            {
                id: 3,
                name: '王东阳医生',
                phone: '19966722286',
                avatar: '👨‍⚕️'
            }
        ]);

        // 拨打电话功能
        const callDoctor = (phone) => {
            window.location.href = `tel:${phone}`;
        };

        // 处理底部导航切换
        const handleTabChange = (newTab) => {
            activeTab.value = newTab;
            if (newTab === 'home') {
                router.push('/');
            } else if (newTab === 'mine') {
                router.push('/personal');
            }
        };

        return {
            doctors,
            activeTab,
            callDoctor,
            handleTabChange
        };
    }
}
</script>

<style scoped>
.contact-doctor-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20px;
    padding-bottom: 80px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.subtitle {
    font-size: 16px;
    color: #666;
}

.doctor-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.doctor-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.doctor-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.doctor-avatar {
    width: 60px;
    height: 60px;
    background: #e8f5e9;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.doctor-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.doctor-name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.doctor-phone {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.contact-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.contact-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

/* 响应式调整 */
@media screen and (max-width: 320px) {
    .doctor-card {
        padding: 16px;
    }

    .doctor-avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .doctor-name {
        font-size: 18px;
    }

    .doctor-phone {
        font-size: 15px;
    }

    .contact-btn {
        padding: 10px 20px;
        font-size: 15px;
    }
}
</style> 